<template>
  <div class="audit-echart">
    <!-- <el-header >
      <el-form ref="contractRule" :rules="contractRule" :model="headerCheck" label-position="right">
        <el-row>
          <el-col style="width:440px;">
            <el-form-item label="选择时间" prop="selectedDate">
              <el-date-picker id="monthPicker"
                ref="monthPicker"
                v-model="headerCheck['selectedDate']"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col style="width:100px;">
            <el-button class="query" @click="buttonClick">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header> -->

    <el-main style="padding-top:0;">
      <el-row :gutter="15">
        <el-col :span="12">
          <div class="chart-title">总体使用情况</div>
          <div class="chart-panel">
           <IEcharts style="min-height:350px;" :option="overviewOptions" :loading="loading" :resizable="resizable" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-title">校验场景使用情况</div>
          <div class="chart-panel">
            <IEcharts style="min-height:350px;" :option="verfiyOptions" :loading="loading" :resizable="resizable" />
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-col>
          <div class="chart-title">调用次数总览</div>
          <div class="chart-panel">
            <el-table v-loading="listLoading" ref="tableData" border :data="tableData" class="table-bottom"
              element-loading-text="数据加载中...">
              <el-table-column :label="item.label" :property="item.prop" v-for="item in tableColumns" :key="item.prop" :width="item.width" align="center">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>


    </el-main>
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'

  export default {
    components: {
      IEcharts
    },
    data() {
      return {
        headerCheck:{
          selectedDate: []
        },
        loading:false,
        resizable: true,
        listLoading: false,

        tableColumns:[
          {prop:'period',label:'周时间段',width:250},
          {prop:'total',label:'总调用次数/周'},
          {prop:'query',label:'查询场景次数/周'},
          {prop:'verify',label:'校验场景次数/周'},
          {prop:'block',label:'校验拦截次数/周'},
          {prop:'per',label:'校验拦截比率（%）'},
        ],
        tableData: [],

        overviewChart: {
          week:[],
          total:[],
          query:[],
          verify:[]
        },
        verfiyChart: {
          week:[],
          verify:[],
          block:[],
          rate:[]
        },
        overviewOptions:{},
        verfiyOptions:{},

        contractRule: {
          selectedDate: [{
            required: true,
            message: '请选择时间段',
            trigger: 'blur'
          }]
        },

        commonConf:{
          toolbox: {
            show: false,
            right: 30,
            feature: {
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              },
              magicType: {
                show: true,
                type: ['bar', 'line']
              }
            }
          },
          tooltip: {
              trigger: "axis",
              axisPointer: {
                  type: "shadow",
                  textStyle: {
                      color: "#fff"
                  }

              },
          },

          grid:{
            top: '30px',
            left: '20px',
            right: '50px',
            bottom: '30px',
            containLabel: true
          },

          itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#666',
                    fontSize: 10
                  },
                  formatter: function(p) {
                    let value = ''
                    if (p.value > 0) {
                      value = p.value
                      if (value > 999) {
                        let parts = value.toString().split('.')
                        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                        value = parts.join('.')
                      }
                    }
                    return value
                  }
                }
              }
            }
        }
      }
    },
    created() {
      this.buttonClick()
    },
    mounted() {},
    computed: {
    },
    methods: {

      async buttonClick() {
        this.listLoading = true
        this.loading = true
        try {
         /* await this.$refs['contractRule'].validate()
          const data = {
            startDate: this.headerCheck.selectedDate[0],
            endDate: this.headerCheck.selectedDate[1],
          } */
          var data=null;

          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/overview'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })

          var resultData = r.data.data;
          if (resultData && resultData.length > 0) {
              var self = this;
              console.log(resultData);
              resultData.forEach(function(item,i){
                  var week = '第'+item.calweek.substr(4)+'周';
                  self.overviewChart.week.push(week);
                  self.overviewChart.total.push(item.tatolCount);
                  self.overviewChart.query.push(item.queryCount);
                  self.overviewChart.verify.push(item.verificationCount);

                  self.verfiyChart.week.push(week);
                  self.verfiyChart.verify.push(item.verificationCount);
                  self.verfiyChart.block.push(item.blockCount);
                  self.verfiyChart.rate.push((item.per*100).toFixed(1));

                  self.tableData.push({
                      period:week+'('+item.period+')',
                      total:item.tatolCount,
                      query:item.queryCount,
                      verify:item.verificationCount,
                      block:item.blockCount,
                      per:(item.per*100).toFixed(1)+'%'
                  });
              });

              this.setOverviewChart();
              this.setVerfiyChart();

          }
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
          this.loading=false
        }
      },

      async setOverviewChart(){
        var self = this;
        this.overviewOptions = {
          toolbox:self.commonConf.toolbox,
          xAxis: {
            type: 'category',
            //name: '周',
            data: self.overviewChart.week
          },
          yAxis: {
            name: '次数',
            type: 'value'
          },
          grid: self.commonConf.grid,
          legend: {
            x: 'center',
            y: 'bottom',
            data: ['总调用次数/周','查询场景次数/周','校验场景次数/周']
          },
          series: [{
            name: '总调用次数/周',
            data: self.overviewChart.total,
            type: 'bar',
            barGap:0,
            barMaxWidth: 30,
            // itemStyle:self.commonConf.itemStyle
            itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#FBD09E' },
                    { offset: 0, color: '#FE6356 ' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
          },{
            name: '查询场景次数/周',
            data: self.overviewChart.query,
            type: 'bar',
            barGap:0,
            barMaxWidth: 30,
            // itemStyle:self.commonConf.itemStyle
            itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#FADE9D' },
                    { offset: 0, color: '#FDC43D' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
          },{
            name: '校验场景次数/周',
            data: self.overviewChart.verify,
            type: 'bar',
            barGap:0,
            barMaxWidth: 30,
            // itemStyle:self.commonConf.itemStyle
            itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#E8FDE1' },
                    { offset: 0, color: '#5FE3B0' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
          }],
          tooltip:self.commonConf.tooltip
        }
      },

      async setVerfiyChart(){
        var self = this;
        this.verfiyOptions = {
          toolbox:self.commonConf.toolbox,
          xAxis: {
            type: 'category',
            //name: '周',
            data: self.verfiyChart.week
          },
          yAxis:[{
            name: '次数',
            type: 'value'
          },
          {
            name: '拦截比率',
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
              formatter: '{value} %'
            },
            splitLine: null
          }],
          grid:{
            top: '30px',
            left: '20px',
            right: '20px',
            bottom: '30px',
            containLabel: true
          },
          legend: {
            x: 'center',
            y: 'bottom',
            data: ['校验场景次数/周','校验拦截次数/周','拦截比率']
          },
          series: [{
            name: '校验场景次数/周',
            data: self.verfiyChart.verify,
            type: 'bar',
            barGap:0,
            barMaxWidth: 30,
            // itemStyle:self.commonConf.itemStyle
            itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#FBD09E' },
                    { offset: 0, color: '#FE6356 ' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
          },{
            name: '校验拦截次数/周',
            data: self.verfiyChart.block,
            type: 'bar',
            yAxisIndex: 0,
            barGap:0,
            barMaxWidth: 30,
            // itemStyle:self.commonConf.itemStyle
            itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#FADE9D' },
                    { offset: 0, color: '#FDC43D' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
          },{
            name: '拦截比率',
            data: self.verfiyChart.rate,
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#0091FF',
                    fontSize: 10
                  },
                  formatter: function(p) {
                    return p.value+'%'
                  }
                }
              }
            },
          }],
          tooltip:self.commonConf.tooltip
        }
      },

      numFormatter(num) {
        let value = ''
        if (num > 0) {
          value = num
          if (value > 999) {
            let parts = value.toString().split('.')
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            value = parts.join('.')
          }
        }
        return value
      }

    }
  }
</script>

<style lang="scss">
  .audit-echart {
    margin-top: 30px;
    .date-picker-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;

      .el-icon-caret-bottom {
        font-size: 30px;
        color: red;
      }
    }

    .query {
      color: rgba(255, 255, 255, 1);
      background: rgba(235, 75, 75, 1);
      border-radius: 6px;
    }

    .chart-title {
      font-weight: 800;
      line-height: 35px;
    }

    .chart-panel {
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      border-radius: 4px;
      padding: 10px 5px;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .el-card.is-always-shadow {
      border: 1px solid #e8e6e6;
      height: 350px;
    }
  }
</style>
